<template>
	<view class="my_team_warp">
		<Header leftPathType="switchTab" leftPath="/pages/mine/mine" :title="$t('mine.team')"/>
		<view class="my_team_card">
			<!-- 个人信息 -->
			<view class="team_card_info_warp">
				<up-image :src="userData.avatarUrl || '/static/logo.png'" width="60" height="60" bgColor="#f1f6ff00" shape="circle"></up-image>
				<view class="_info_content_warp">
					<view class="_info_content_title_warp">{{userData.name || $t("common.no")}}</view>
					<view class="_info_content_msg_warp">
						<text>ID：</text>
						<text>{{userData.userId}}</text>
					</view>
				</view>
				<view class="team_card_info_superior" v-if="teamObj.seniorId">上级ID：{{teamObj.seniorId}}</view>
			</view>
			<!-- 我的团队 -->
			<view class="team_card_comm team_warp" @click="jumpMyTeam">
				<view class="team_card_title_comm">{{$t('mine.team')}}</view>
				<view class="team_num_warp">
					<view>{{teamObj.teamCount}} {{$t("mine.team.people")}}</view>
					<view style="margin-top: 10rpx;">
						<up-image src="/static/comm/right_h.png" width="16" bgColor="#f1f6ff00" mode="widthFix" ></up-image>
					</view>
				</view>
			</view>
			<!-- 团队业绩 -->
			<view class="team_card_comm">
				<view class="team_card_title_comm">{{$t('mine.team.size')}}</view>
				<view class="team_card_statistics_comm">
					<view class="team_card_statistics_item_comm2">
						<view class="statistics_item_amount_comm">{{teamObj.teamAmount}}</view>
						<view class="statistics_item_title_comm">{{$t('common.recharge.amount')}}</view>
					</view>
					<view class="team_card_statistics_fg_comm"></view>
					<view class="team_card_statistics_item_comm2">
						<view class="statistics_item_amount_comm">{{teamObj.teamNum}}</view>
						<view class="statistics_item_title_comm">{{$t('common.recharge.quantity')}}</view>
					</view>
					<view class="team_card_statistics_fg_comm"></view>
					<view class="team_card_statistics_item_comm2">
						<view class="statistics_item_amount_comm">{{teamObj.cardNum}}</view>
						<view class="statistics_item_title_comm">{{$t('common.cards.quantity')}}</view>
					</view>
				</view>
			</view>
			<!-- 提成统计 -->
			<view class="team_card_comm">
				<view class="team_card_title_comm">{{$t('mine.team.commission.statistics')}}</view>
				<view class="team_card_statistics_comm">
					<view class="team_card_statistics_item_comm">
						<view class="statistics_item_amount_comm">{{rewardSummaryObj.todayAmount || 0}}</view>
						<view class="statistics_item_title_comm">{{$t('mine.team.today.commission.amount')}}</view>
					</view>
					<view class="team_card_statistics_fg_comm"></view>
					<view class="team_card_statistics_item_comm">
						<view class="statistics_item_amount_comm">{{rewardSummaryObj.todayCount || 0}}</view>
						<view class="statistics_item_title_comm">{{$t('mine.team.today.commission.number')}}</view>
					</view>
					<view class="team_card_statistics_fg_comm"></view>
					<view class="team_card_statistics_item_comm">
						<view class="statistics_item_amount_comm">{{rewardSummaryObj.totalAmount || 0}}</view>
						<view class="statistics_item_title_comm">{{$t('mine.team.total.commission.amount')}}</view>
					</view>
					<view class="team_card_statistics_fg_comm"></view>
					<view class="team_card_statistics_item_comm">
						<view class="statistics_item_amount_comm">{{rewardSummaryObj.totalCount || 0}}</view>
						<view class="statistics_item_title_comm">{{$t('mine.team.total.commission.number')}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 提成明细 -->
		<view class="my_team_details">
			<view class="_details_header">
				<view class="_details_header_title">{{$t('mine.team.commission.details')}}</view>
				<view class="_details_header_all">
					<!-- <view>全部</view>
					<view style="margin-top: 10rpx;">
						<up-image src="/static/comm/right_2.png" width="14" bgColor="#f1f6ff00" mode="widthFix" ></up-image>
					</view> -->
				</view>
			</view>
			<view class="_details_content">
				<scroll-view scroll-y="true" @scrolltolower="loadMore" :style="{'height':'calc(100vh - 1049rpx)'}">
					<view class="_details_content_item" v-for="item in detailsList" :key="item.id" v-if="detailsList && detailsList.length !==0">
						<view>
							<view class="_details_content_item_title">{{$t('common.user')}}{{item.userId}}</view>
							<view class="_details_content_item_value">{{formatDate(item.ctdate)}}</view>
						</view>
						<view>
							<view class="_details_content_item_title">{{item.amount}}</view>
							<view class="_details_content_item_value">{{getValue(COMMISSION_STATUS,item.status)}}</view>
						</view>
					</view>
					<view v-else class="not_data_warp">
							<up-image src="/static/comm/not_data.png" width="200" height="90" bgColor="#f1f6ff00"></up-image>
							<view class="not_data_msg_warp">{{$t('details.historical.details.no')}}</view>
					</view>
					<view v-if="loading" style="text-align: center;">{{$t("common.loading")}}</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header_comm3.vue';
	import { getPerformance,getRewardSummary,getRewardSummaryRecord } from '@/api/team.js';
	import { formatDate } from '@/utils/index.js';
	import { getValue,COMMISSION_STATUS } from '@/utils/enumUtils.js';
	import { getStorageFun,USER_DATA,clear } from '@/utils/auth.js'
	
	export default {
		components:{Header},
		computed: {
		    COMMISSION_STATUS() {
		      return COMMISSION_STATUS;
		    },
			 getValue() {
		      return getValue;
		    },
		},
		data() {
			return {
				userData:{},// 当前登录用户
				teamObj:{},// 团队数据
				rewardSummaryObj:{},// 提成统计
				detailsList:[],
				form:{
					page:1,
					pageSize:10,
				},
				loading:false,
			};
		},
		mounted() {
			this.userData = getStorageFun(USER_DATA);
			this.getPerformanceFun();
			this.getRewardSummaryFun();
			this.loadMore();
		},
		methods: {
			formatDate,
			jumpMyTeam() {
				const userData =this.userData;
				uni.navigateTo({
					url:'/pages/my_team_level/my_team_level?id='+userData.userId,
				})
			},
			//查询团队概况
			async getPerformanceFun(){
				const resp = await getPerformance();
				if(resp && resp.bizcode === 100){
					this.teamObj = resp.data;
				}
			},
			//查询团队概况
			async getRewardSummaryFun(){
				const resp = await getRewardSummary();
				if(resp && resp.bizcode === 100){
					this.rewardSummaryObj = resp.data;
				}
			},
			// 当滚动到底部时触发的方法
			loadMore() {
				this.loadData(); // 加载更多数据
			},
			// 加载数据的方法
			async loadData() {
			  if (this.loading) return; // 如果正在加载，则不重复加载
			  this.loading = true; // 设置加载状态为true
			  try {
				const newData = await this.fetchData(this.form.page, this.form.pageSize);
				if(newData.entitys && newData.entitys.length !==0){
					this.detailsList = [...this.detailsList, ...newData.entitys]; // 将新数据添加到列表中
					this.form.page++; 
				}
			  } catch (error) {
				console.error('加载数据失败:', error);
			  } finally {
				this.loading = false; // 设置加载状态为false
			  }
			},
			// 模拟获取数据的方法，实际应用中应该替换为你的数据获取逻辑，例如从服务器获取数据
			async fetchData(page, pageSize) {
				const params = {
					page,
					pageSize,
				}
				// 消费记录
				const resp = await getRewardSummaryRecord(params);
				if(resp && resp.bizcode === 100 && resp.data){
					return resp.data;
				}else{
					return [];
				}
			},
		}
	}
</script>

<style lang="scss">
.my_team_warp{
	height: calc(100vh - 0rpx);
	overflow: hidden;
	background-color: $app-policy-color;
	.my_team_card{
		padding: 30rpx;
		position: relative;
		.team_card_info_warp{
			display: flex;
			align-items: center;
			color: #FFFFFF;
			._info_content_warp{
				margin-left: 20rpx;
			}
			._info_content_title_warp{
				font-weight: 800;
				font-size: 40rpx;
				color: #FFFFFF;
			}
			._info_content_msg_warp{
				margin-top:20rpx;
				font-weight: 500;
				font-size: 26rpx;
			}
			.team_card_info_superior{
				position: absolute;
				right: 0;
				top: 28rpx;
				background: #f5f5f526;
				border-radius: 30rpx 0rpx 0rpx 30rpx;
				line-height: 56rpx;
				width: 282rpx;
				padding-left: 30rpx;
			}
		}
	
		.team_card_comm{
			background: #FFFFFF;
			border-radius: 20rpx;
			border: 1px solid #999999;
			padding: 30rpx;
			margin-top: 30rpx;
			.team_card_title_comm{
				font-weight: bold;
				font-size: 32rpx;
				color: #111111;
			}
		}
		.team_card_statistics_comm{
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			.team_card_statistics_item_comm{
				width: 24%;
			}
			.team_card_statistics_item_comm2{
				width: 33%;
			}
			.statistics_item_amount_comm{
				font-weight: bold;
				font-size: 28rpx;
				color: #111111;
				text-align: center;
			}
			.statistics_item_title_comm{
				font-size: 20rpx;
				color: #999999;
				text-align: center;
				margin-top: 10rpx;
			}
			.team_card_statistics_fg_comm{
				border-right: 1rpx solid #EEEEEE;
				height: 60rpx;
				width: 1rpx;
			}
		}
		.team_warp{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.team_num_warp{
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 32rpx;
				color: #111111;
			}
		}
	}

	.my_team_details{
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 30rpx;
		._details_header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			._details_header_title{
				font-weight: bold;
				font-size: 36rpx;
				color: #111111;
			}
			._details_header_all{
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 26rpx;
				color: #666666;
			}
		}
		._details_content{
			// height: calc(100vh - 1049rpx);
			// overflow: auto;
			._details_content_item{
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #EEEEEE;
				padding: 30rpx 0;
			}
			._details_content_item_title{
				font-weight: bold;
				font-size: 28rpx;
				color: #111111;
			}
			._details_content_item_value{
				font-size: 24rpx;
				color: #999999;
				margin-top: 10rpx;
			}
		}
	}
}
</style>
